<template>
    <div class="login">
        <div class="login-head">登录</div>
        <div class="login-main">
            <div class="login-list">
                <div class="login-title">类型</div>
                <div class="login-radio-list">
                    <input class="radio-input" value="1" type="radio" v-model="type">
                    <div>客户</div>
                </div>
                <div class="login-radio-list">
                    <input class="radio-input" value="2" type="radio" v-model="type">
                    <div>供应商</div>
                </div>
            </div>
            <div class="login-list">
                <div class="login-title">账号</div>
                <input class="login-input" type="text" v-model="username" placeholder="请输入登录账号">
            </div>
            <div class="login-list">
                <div class="login-title">密码</div>
                <input class="login-input" type="password" v-model="psw" placeholder="请输入登录密码">
            </div>
            <div class="login-btn" @click="doLogin">立即登录</div>
    <!--            <div class="login-foot">-->
<!--                <div class="login-toRegiste" @click="toRegiste">注册账号</div>-->
<!--                <div class="login-forget">忘记密码</div>-->
<!--            </div>-->
        </div>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Login extends Sence {
        public username: any = ""; // 账号
        public psw: any = ""; // 密码
        public type: any = 1; // 类型

        /**
         * 初始化
         */
        public mounted(): void {
            if (localStorage.getItem('token')) {
                this.$router.push('/')
            }
        }

        /**
         * 表单失去焦点回滚底部
         */
        public inputScroll(): void {
            window.scrollTo(0, document.documentElement.clientHeight);
        }

        /**
         * 前往注册
         */
        public toRegiste(): void {
            this.$router.push("/registe");
        }

        /**
         * 登录
         */
        public doLogin(): void {
            this.inputScroll();
            this.post("index.php/api/Login/login", {
                user: this.username,
                pass: this.psw,
                type: this.type,
                cross:'wap'
            }).then((res: any) => {
                localStorage.setItem("token", res.data.token);
                this.$router.push("/");
            });
        }
    }


</script>

<style scoped lang="stylus" >
    input {
        outline: none;
        border: 0;
        padding 5px 0;
    }

    .radio-input
       margin-right 3px
       /*background #4876ff!important*/
       color #4876ff!important
       i
        color #4876ff!important
        background #4876ff!important

    .login-radio-list
       display flex
       flex-direction row
       padding 5px 0
       margin-right 15px

    .login
        height 100vh
        width 100vw
        background-image url("../image/bg.jpeg")
        background-size 100%

        .login-head
            height 35px
            line-height 35px
            color white
            font-size 16px
            font-weight bold
            text-align center

        .login-main
            width 80vw
            margin auto
            margin-top 20vh
            background white
            border-radius 8px
            box-sizing border-box
            padding 0 10px 10px 10px

            .login-foot
                display flex
                flex-direction row
                justify-content space-between

            .login-list
                display flex
                align-items center
                border-bottom 1px solid #eee
                padding 8px 0

                .login-title
                    font-size 14px
                    font-weight bold
                    width 23vw

                .login-input
                    width calc(57vw - 20px)
                    font-size 14px

            .login-btn
                margin-top 10px
                width 100%
                height 35px
                line-height 35px
                text-align center
                background #007aff
                color white
                border-radius: 3px

            .login-toRegiste
                color #007aff
                height 35px
                line-height 35px
                font-size 12px
                font-weight bold

            .login-forget
                color #dd524d
                height 35px
                line-height 35px
                font-size 12px
                font-weight bold


</style>
